<template>
  <div v-if="subtask.length">
    <div class="task-list-wrap" v-for="item in subtask" :key="item.id">
      <span class="task-list-title">{{ item.name }}</span>
      <ul class="item-list-item">
        <li>
          <span>预计开始时间</span>
          <div class="div" v-if="BUTTONS.planStartTime">
            <span class="value-style" v-show="item.planStartTime" @click="() => addHardStandard(planStartTimeHistory(item))">
              {{ item.planStartTime ? dayJs(item.planStartTime).format("YYYY/MM/DD") : "--" }}
            </span>
            <UpDate v-show="!item.planStartTime" class="li" type="date" :config="planStartTimeConfig(item)">
              <div class="flx-start el-icon-wrap">
                <el-icon><CirclePlus /></el-icon>
                <!-- <span class="ml4 ft14">选择时间</span> -->
              </div>
            </UpDate>
          </div>
          <span v-else class="value-style-default">
            {{ item.planStartTime ? dayJs(item.planStartTime).format("YYYY/MM/DD") : "--" }}
          </span>
        </li>
        <li>
          <span>预计完成时间</span>
          <div class="div" v-if="BUTTONS.planEndTime">
            <span class="value-style" v-show="item.planEndTime" @click="() => addHardStandard(planEndTimeHistory(item))">
              {{ item.planEndTime ? dayJs(item.planEndTime).format("YYYY/MM/DD") : "--" }}
            </span>
            <UpDate v-show="!item.planEndTime" class="li" type="date" :config="planEndTimeConfig(item)">
              <div class="flx-start el-icon-wrap">
                <el-icon><CirclePlus /></el-icon>
                <!-- <span class="ml4 ft14">选择时间</span> -->
              </div>
            </UpDate>
          </div>
          <span v-else class="value-style-default">
            {{ item.planEndTime ? dayJs(item.planEndTime).format("YYYY/MM/DD") : "--" }}
          </span>
        </li>
        <li>
          <span>负责人</span>
          <div class="div" v-if="BUTTONS.user">
            <span class="value-style" v-show="item.userName" @click="() => addHardStandard(userHistory(item))">
              {{ item.userName || "--" }}
            </span>
            <UpDate v-show="!item.userName" class="li" type="dropdown" :config="userConfig(item)">
              <div class="flx-start el-icon-wrap">
                <el-icon><CirclePlus /></el-icon>
                <!-- <span class="ml4 ft14">选择负责人</span> -->
              </div>
            </UpDate>
          </div>
          <span v-else class="value-style-default">
            {{ item.userName || "--" }}
          </span>
        </li>
        <li>
          <span>实际开始时间</span>
          <div class="div" v-if="BUTTONS.startTime">
            <span class="value-style" v-show="item.startTime" @click="() => addHardStandard(startTimeHistory(item))">
              {{ item.startTime ? dayJs(item.startTime).format("YYYY/MM/DD") : "--" }}
            </span>
            <UpDate v-show="!item.startTime" class="li" type="date" :config="startTimeConfig(item)">
              <div class="flx-start el-icon-wrap">
                <el-icon><CirclePlus /></el-icon>
                <!-- <span class="ml4 ft14">选择时间</span> -->
              </div>
            </UpDate>
          </div>
          <span v-else class="value-style-default">
            {{ item.startTime ? dayJs(item.startTime).format("YYYY/MM/DD") : "--" }}
          </span>
        </li>
        <li>
          <span>实际完成时间</span>
          <div class="div" v-if="BUTTONS.endTime">
            <span class="value-style" v-show="item.endTime" @click="() => addHardStandard(endTimeHistory(item))">
              {{ item.endTime ? dayJs(item.endTime).format("YYYY/MM/DD") : "--" }}
            </span>
            <UpDate v-show="!item.endTime" class="li" type="date" :config="endTimeConfig(item)">
              <div class="flx-start el-icon-wrap">
                <el-icon><CirclePlus /></el-icon>
                <!-- <span class="ml4 ft14">选择时间</span> -->
              </div>
            </UpDate>
          </div>
          <span v-else class="value-style-default">
            {{ item.endTime ? dayJs(item.endTime).format("YYYY/MM/DD") : "--" }}
          </span>
        </li>
        <li>
          <span>当前延期</span>
          <span class="value-style" :style="item.delayTime ? 'color: #e25e72 !important' : ''">{{
            item.delayTime ? item.delayTime + "天" : "--"
          }}</span>
        </li>
        <li>
          <span>当前状态</span>
          <span class="value-style" :style="`color: ${taskStatusColor(item.status)} !important`">{{
            getDictItem("orderStatus", item.status) || "--"
          }}</span>
        </li>
        <li>
          <span>变更历史</span>
          <span class="value-style" style="color: #5378f6; cursor: pointer" @click="seeHandler(item.id)">查看</span>
        </li>
      </ul>
    </div>
  </div>
  <div v-else>
    <el-empty></el-empty>
  </div>
  <div v-if="drawerVisible">
    <Dialog v-model:drawerVisible="drawerVisible" v-model:config="config" @change="refresh" />
  </div>
</template>
<script lang="ts" setup>
import { ref, inject, computed, onMounted } from "vue";
import Dialog from "@/components/DialogForm/index.vue";
import historyHandle from "@/utils/history";
import UpDate from "@/views/project-Deprecated/components/UpDate/index.vue";
import { ElMessage } from "element-plus";
import mittBus from "@/utils/mittBus";
import dayJs from "dayjs";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { useDict } from "@/hooks/useDict";
// api
import {
  updatePdmOrderTaskPlanStartTime,
  updatePdmOrderTaskPlanEndTime,
  updatePdmOrderTaskStartTime,
  updatePdmOrderTaskEndTime,
  getChangeHistoryByOrderTaskId,
  updatePdmOrderTaskDesigner
} from "@/api/modules/order"; //   updateOrderTask,
import { getListAllUser } from "@/api/modules/sys";
// hook
const { getDict, getDictItem } = useDict(["orderReason", "orderStatus", "orderReasonType"]);
const { BUTTONS } = useAuthButtons();
// 变量
defineProps({
  detail: {
    type: Object,
    default: () => {}
  },
  subtask: {
    type: Array,
    default: () => []
  }
});
let drawerVisible = ref(false);
let config = ref<any>({
  width: 24
});
const orderId = inject("orderId");
const listAllUser = ref<any>([]);
// computed
const planStartTimeHistory = computed(() => data => {
  return {
    title: "预计开始时间",
    api: async params => await updatePdmOrderTaskPlanStartTime(params),
    column: [
      {
        type: "group",
        title: "",
        direction: "",
        list: [
          {
            type: "date-picker",
            key: "modifiedData",
            formItemAttribute: {
              label: "预计开始时间"
            },
            attributes: {
              placeholder: "请填写预计开始时间",
              type: "date",
              format: "YYYY-MM-DD",
              valueFormat: "YYYY-MM-DD HH:mm:ss"
            }
          }
        ]
      }
    ],
    value: data.planStartTime,
    orderTaskId: data.id
  };
});
const planStartTimeConfig = computed(() => data => {
  return {
    data,
    key: "planStartTime",
    api: async params => {
      await updatePdmOrderTaskPlanStartTime({
        orderTaskId: params.id,
        modifiedData: params.planStartTime
      });
    },
    attributes: {
      type: "date",
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD HH:mm:ss"
    },
    successCallback: () => {
      refresh();
      ElMessage.success("添加成功");
    },
    failCallback: () => {
      refresh();
    }
  };
});
const planEndTimeHistory = computed(() => data => {
  // alert(data.planStartTime);
  return {
    title: "预计结束时间",
    api: async params => await updatePdmOrderTaskPlanEndTime(params),
    column: [
      {
        type: "group",
        title: "",
        direction: "",
        list: [
          {
            type: "date-picker",
            key: "modifiedData",
            formItemAttribute: {
              label: "预计结束时间"
            },
            attributes: {
              placeholder: "请填写预计结束时间",
              type: "date",
              format: "YYYY-MM-DD",
              valueFormat: "YYYY-MM-DD HH:mm:ss"
            }
          }
        ]
      }
    ],
    value: data.planEndTime,
    orderTaskId: data.id
  };
});
const planEndTimeConfig = computed(() => data => {
  return {
    data,
    key: "planEndTime",
    api: async params => {
      await updatePdmOrderTaskPlanEndTime({ orderTaskId: params.id, modifiedData: params.planEndTime });
    },
    attributes: {
      type: "date",
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD HH:mm:ss"
    },
    successCallback: () => {
      refresh();
      ElMessage.success("添加成功");
    },
    failCallback: () => {
      refresh();
    }
  };
});

const startTimeHistory = computed(() => data => {
  // alert(data.planStartTime);
  return {
    title: "实际开始时间",
    api: async params => await updatePdmOrderTaskStartTime(params),
    column: [
      {
        type: "group",
        title: "",
        direction: "",
        list: [
          {
            type: "date-picker",
            key: "modifiedData",
            formItemAttribute: {
              label: "实际开始时间"
            },
            attributes: {
              placeholder: "请填写实际开始时间",
              type: "date",
              format: "YYYY-MM-DD",
              valueFormat: "YYYY-MM-DD HH:mm:ss"
            }
          }
        ]
      }
    ],
    value: data.startTime,
    orderTaskId: data.id
  };
});
const startTimeConfig = computed(() => data => {
  return {
    data,
    key: "startTime",
    api: async params => {
      await updatePdmOrderTaskStartTime({ orderTaskId: params.id, modifiedData: params.startTime });
    },
    attributes: {
      type: "date",
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD HH:mm:ss"
    },
    successCallback: () => {
      refresh();
      ElMessage.success("添加成功");
    },
    failCallback: () => {
      refresh();
    }
  };
});

const endTimeHistory = computed(() => data => {
  return {
    title: "实际结束时间",
    api: async params => await updatePdmOrderTaskEndTime(params),
    column: [
      {
        type: "group",
        title: "",
        direction: "",
        list: [
          {
            type: "date-picker",
            key: "modifiedData",
            formItemAttribute: {
              label: "实际结束时间"
            },
            attributes: {
              placeholder: "请填写实际结束时间",
              type: "date",
              format: "YYYY-MM-DD",
              valueFormat: "YYYY-MM-DD HH:mm:ss"
            }
          }
        ]
      }
    ],
    value: data.endTime,
    orderTaskId: data.id
  };
});
const endTimeConfig = computed(() => data => {
  return {
    data,
    key: "endTime",
    api: async params => {
      await updatePdmOrderTaskEndTime({ orderTaskId: params.id, modifiedData: params.endTime });
    },
    attributes: {
      type: "date",
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD HH:mm:ss"
    },
    successCallback: () => {
      refresh();
      ElMessage.success("添加成功");
    },
    failCallback: () => {
      refresh();
    }
  };
});
const userHistory = computed(() => data => {
  return {
    title: "负责人",
    api: async params => await updatePdmOrderTaskDesigner(params),
    column: [
      {
        type: "select",
        key: "modifiedData",
        formItemAttribute: {
          label: "负责人"
        },
        attributes: {
          placeholder: "请选择负责人",
          options: listAllUser.value,
          multiple: false,
          filterable: true,
          clearable: true
        }
      }
    ],
    value: data.userId,
    orderTaskId: data.id
  };
});
const userConfig = computed(() => data => {
  return {
    data,
    other: { options: listAllUser.value },
    style: { height: 200 },
    key: "userId",
    api: async params => {
      const obj = listAllUser.value.find(item => item.id == params.userId);
      if (obj) {
        params.userName = obj.name;
      }
      await updatePdmOrderTaskDesigner({ orderTaskId: params.id, modifiedData: params.userId });
    },
    successCallback: () => {
      ElMessage.success("添加成功");
    },
    failCallback: () => {
      refresh();
    }
  };
});
// 方法
// 获取全部用户
const getListAllUserFn = async () => {
  const { data } = await getListAllUser();
  listAllUser.value = data;
};
const refresh = () => {
  mittBus.emit("OrderRefresh");
};
const seeHandler = async orderTaskId => {
  const { data } = await getChangeHistoryByOrderTaskId({ orderTaskId });
  console.log(orderTaskId, getChangeHistoryByOrderTaskId);
  historyHandle({
    flag: "查看",
    getTableList: () => {},
    id: orderId,
    list: data || [],
    remark: "",
    typeId: "",
    getDictItem,
    listAllUser: listAllUser.value || []
  });
};
const addHardStandard = (options: any) => {
  const { title, api, value, column = [], orderTaskId } = options;
  drawerVisible.value = true;
  config.value.title = "变更" + title;
  config.value.form = {
    formData: {
      orderTaskId,
      reason: "",
      reasonDetail: "",
      modifiedData: value
    },
    rules: {
      modifiedData: {
        required: true,
        message: "不能为空"
      },
      reason: {
        required: true,
        message: "请填写变更原因"
      },
      reasonDetail: {
        required: true,
        message: "请填写变更详情"
      }
    }
  };
  config.value.column = [
    ...column,
    {
      type: "select",
      key: "reason",
      formItemAttribute: {
        label: "变更原因"
      },
      attributes: {
        placeholder: "请填写变更原因",
        options: getDict("orderReason"),
        multiple: false,
        filterable: true,
        clearable: true
      }
    },
    {
      type: "input",
      key: "reasonDetail",
      formItemAttribute: {
        label: "变更详情"
      },
      attributes: {
        placeholder: "请填写变更详情",
        type: "textarea"
      }
    }
  ];
  config.value.api = api;
  config.value.message = "更新成功";
};
const taskStatusColor = (val: string) => {
  switch (val) {
    case "1814101398665560064": // 作废
    case "1814101293036208128": // 未开始
      return "#999999 ";
    case "1814101313978368000": // 进行中
      return "#5378F6";
    case "1814101348577181696": // 已暂停
      return "#FF5C93";
    case "1814101371838791680": // 已完成
      return "#74D98C";
  }
};
onMounted(() => {
  getListAllUserFn();
});
</script>
<style lang="scss" scoped>
.task-list-wrap {
  display: flex;
  flex-flow: column nowrap;
  padding: 20px 30px 30px;
  margin-bottom: 10px;
  background: #ffffff;
  .task-list-title {
    margin-bottom: 30px;
    font-size: 16px;
    font-weight: 600;
    color: #333333;
  }
  .item-list-item {
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    li {
      display: flex;
      flex: 1;
      flex-flow: column nowrap;
      margin-right: 20px;
      &:last-child {
        margin-right: 0;
      }
      span:first-child {
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: 400;
        color: #999999;
      }
      .value-style {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #333333 !important;
        cursor: pointer !important;
      }
      .value-style-default {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #333333 !important;
        cursor: default !important;
      }
      .el-icon-wrap {
        font-size: 16px;
        color: #666666;
      }
    }
    .li {
      span {
        width: 100%;
      }
    }
  }
}
</style>
